import React, { useState } from 'react'
import Avatars from '../../../component/avatars'
import { InputNumber, Button, Table, Tabs, Modal } from 'antd'
import Forms from "./form"
import { useSelector } from 'react-redux'
import { UserIcon } from '../../../utils/icons';

export default function Point() {
  const languages = useSelector((state) => state.publicReducer.language)
  const username = useSelector((state) => state.userReducer.user.username)
  const data = [
    {
      key: '1',
      날짜: '2022-10-02',
      포인트: '2,142,355',
      상태: '정산 중',
      정산방법: 'EOS',
      정산수량:"999,999",
      TX_ID: "1653132132",
      기관명: "City bank",
      완료일자: "2022-10-02",
    },
    {
      key: '2',
      날짜: '2022-9-02',
      포인트: '2,142,355',
      상태: '정산 중',
      정산방법: 'EOS',
      정산수량:"999,999",
      TX_ID: "sjdaisojd",
      기관명: "City bank",
      완료일자: "2022-10-02",
    },
    {
      key: '3',
      날짜: '2022-8-02',
      포인트: '2,142,355',
      상태: '정산 중',
      정산방법: 'EOS',
      정산수량:"999,999",
      TX_ID: "15sd321",
      기관명: "City bank",
      완료일자: "2022-10-02",
    },
    {
      key: '4',
      날짜: '2022-7-02',
      포인트: '2,142,355',
      상태: '정산 중',
      정산방법: 'EOS',
      정산수량:"999,999",
      TX_ID: "dasokmdla",
      기관명: "City bank",
      완료일자: "2022-10-02",
    },
    {
      key: '5',
      날짜: '2022-6-02',
      포인트: '2,142,355',
      상태: '정산 중',
      정산방법: 'XRP',
      정산수량:"999,999",
      TX_ID: "sadlpaskdasd",
      기관명: "City bank",
      완료일자: "2022-10-02",
    },
  ]
  const columns = [
    {
      title: languages === "Korean" ? "날짜" : (languages === "Chinese" ? "日期" : "Date"),
      key: '날짜',
      dataIndex: '날짜',
    },
    {
      title: languages === "Korean" ? "포인트" : (languages === "Chinese" ? "积分" : "Point"),
      dataIndex: '포인트',
      key: '포인트',
      render: (row) => "₩" + row
    },
    {
      title: languages === "Korean" ? "상태" : (languages === "Chinese" ? "状态" : "Status"),
      dataIndex: '상태',
      key: '상태',
    },
    {
      title: languages === "Korean" ? "정산 방법" : (languages === "Chinese" ? "结算方式" : "Closing method"),
      dataIndex: '정산방법',
      key: '정산방법',
    },
    {
      title: languages === "Korean" ? "정산 수량" : (languages === "Chinese" ? "结算数量" : "Settlement quantity"),
      dataIndex: '정산수량',
      key: '정산수량',
    },
    {
      title: 'TX_ID',
      dataIndex: 'TX_ID',
      key: 'TX_ID',
    },
    {
      title: languages === "Korean" ? "기관명" : (languages === "Chinese" ? "交易所名称" : "Exchange name"),
      dataIndex: '기관명',
      key: '기관명',
    },
    {
      title: languages === "Korean" ? "완료 일자" : (languages === "Chinese" ? "完成日期" : "Completion date"),
      dataIndex: '완료일자',
      key: '완료일자',
    },
  ]



  const [value, setValue] = useState(null)
  const [settlement, setSettlement] = useState("")
  const changeValue = (values) => {
    console.log(values)
    setValue(values)
  }
  const tabChange = (key) => {
    console.log(key);
  };

  const [isModalOpen, setIsModalOpen] = useState(false)
  const showModal = () => {
    setIsModalOpen(true)
  }
  const handleCancel = () => {
    setIsModalOpen(false)
  }
  const handleOk = () => {
    setIsModalOpen(false)
    setSettlement("")
    setValue("")
  }

  const items = [
    {
      label: `XRP`,
      key: '1',
      children: <div className='Tabs'>
        <Forms labels={{ label1: languages === "Korean" ? "My XRP 주소" : (languages === "Chinese" ? "My XRP 地址" : "My XRP address"), label2: languages === "Korean" ? "데스티네이션 테그" : (languages === "Chinese" ? "1회 최대 거래금액" : "Destination tag"), Submit: languages === "Korean" ? "확인" : (languages === "Chinese" ? "确认" : "OK"), remember: true }} showModal={showModal}></Forms>
      </div>
    },
    {
      label: `EOS`,
      key: '2',
      children: <div className='Tabs'>
        <Forms labels={{ label1: languages === "Korean" ? "My EOS 주소" : (languages === "Chinese" ? "My EOS 地址" : "My EOS address"), label2: "MEMO", Submit: languages === "Korean" ? "확인" : (languages === "Chinese" ? "确认" : "OK"), remember: false }}showModal={showModal}></Forms>
      </div>
    },
    {
      label: languages === "Korean" ? "신용카드" : (languages === "Chinese" ? "信用卡" : "Credit card"),
      key: '3',
      children: <div className='Tabs'><aside>{languages === "Korean" ? "서비스 준비 중 입니다." : (languages === "Chinese" ? "服务正在准备中" : "Service is being prepared.")}</aside></div>,
    }
  ]
  return (
    <div className='point'>
      <div><Avatars username={username} level="Lv.99" coupon={languages === "Korean" ? "쿠폰 잔액" : (languages === "Chinese" ? "可用优惠券" : "Coupon Balance")} balance="8,888,888" icon={<UserIcon />} /></div>
      <div className='main'>
        <hgroup>
          <aside>{languages === "Korean" ? "포인트 금액" : (languages === "Chinese" ? "积分" : "Point amount")}</aside>
          <InputNumber controls={false} onChange={changeValue} value={value} />
          <Button onClick={() => setSettlement(value)}>{languages === "Korean" ? "정산 신청" : (languages === "Chinese" ? "转账申请" : "Transfer Apply")}</Button>
        </hgroup>
        <div>
          <Table size="small" columns={columns} dataSource={data} pagination={false} bordered />
          <h4><span>{languages === "Korean" ? "더보기" : (languages === "Chinese" ? "更多" : "More")}</span></h4>
        </div>

        {
          settlement && <section><nav>{languages === "Korean" ? "정산 받으실 수단을 선택하세요." : (languages === "Chinese" ? "请选择付款方式。" : "Please select the payment method.")}</nav>
            <main><Tabs defaultActiveKey="1" onChange={tabChange} items={items} centered /></main>
            <aside className='footer'>
            {languages === "Korean" ? "10만 포인트 이하는 분기(3개월)에 1회 자동 정산 합니다." : (languages === "Chinese" ? "100,000积分以下每季度（3个月）自动结算一次。" : "100,000 points or less are automatically Closed once every quarter (3 months).")}
            </aside>
          </section>
        }
      </div>



      <Modal className='closing_modal' title={languages === "Korean" ? "포인트 전환" : (languages === "Chinese" ? "转换积分" : "Convert to points")} open={isModalOpen} onCancel={handleCancel} onOk={handleOk} footer={null} centered>
        <figure>
          <figcaption><b>{settlement}</b></figcaption>
          <p>{languages === "Korean" ? "송금 신청이 되었습니다." : (languages === "Chinese" ? "已提出汇款请求。" : "A remittance request has been made.")}</p>
        </figure>
        <Button onClick={handleCancel}>{languages === "Korean" ? "취소" : (languages === "Chinese" ? "取消" : "Cancel")}</Button>
        <Button onClick={handleOk}>{languages === "Korean" ? "확인" : (languages === "Chinese" ? "确认" : "OK")}</Button>
      </Modal>

    </div>
  )
}
